<template>
  <div>
    <el-drawer title="新增借款" :direction="direction" :before-close="handleClose" :visible.sync="showlookover" size="900px">
      <div>
        <el-form ref="form" :label-position="labelPosition" :inline="true" :model="form" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="借款单位">
                <el-input v-model="form.input1" size="mini" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款部门">
                <el-input v-model="form.input2" size="mini" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款人">
                <el-input v-model="form.input3" size="mini" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="是否本人领款">
            <el-radio-group v-model="form.radio" @change="changeradio">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="领款人">
                <el-input v-model="form.lkr" size="mini" :disabled="Isshow"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户银行">
                <el-input v-model="form.Banking" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="汇款账户">
                <el-input v-model="form.Account" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="借款类型" style="margin-right:0px">
                <el-select v-model="form.region" size="mini">
                  <el-option label="招待费" value="招待费"></el-option>
                  <el-option label="出差借款" value="出差借款"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款金额">
                <el-input v-model="form.jkje" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款剩余额度">
                <el-input v-model="form.jksyed" size="mini" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item class="yongtu" label="借款原因">
                <el-input v-model="form.yuyin" class="shuru" :autosize="{ minRows: 3, maxRows: 5}" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="Information">
            <el-button size="small" type="primary" @click="outborrowing">保存</el-button>
            <el-button size="small" type="success" @click="outborrowing">提交</el-button>
            <el-button size="small" type="danger" @click="handleClose">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      direction: 'rtl',
      labelPosition: 'right',
      showlookover: true,
      Isshow: true,
      form: {
        input1: '华电',
        input2: '技术部',
        input3: '张三',
        radio: '是',
        lkr: '张三',
        Banking: '中国农业银行',
        Account: '41152421232132123123',
        region: '出差借款',
        jkje: 2323,
        jksyed: 43434,
        yuyin: '出差工作',
        resource: '出差需要一定生活费，所以借款'
      }
    }
  },
  methods: {
    addborrow() {
      this.showlookover = true
    },
    outborrowing() {
      this.showlookover = false
    },
    changeradio(radio) {
      console.log(radio)
      if (radio === '否') {
        this.Isshow = false
      }
      if (radio === '是') {
        this.Isshow = true
      }
    },
    handleClose(done) {
      // if (this.loading) {
      //   return
      // }
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.showlookover = false
        })
        .catch(_ => {})
    },
  }
}
</script>

<style lang="scss" scoped>
.addhk {
  font-size: 24px;
  margin-top: 3%;
  margin-left: 2%;
  margin-bottom: 2%;
  color: cornflowerblue;
}
.yongtu {
  .shuru {
    width: 750px;
  }
}
::v-deep label::after{
  content: ":";
  position: absolute;
}
::v-deep .el-drawer__header {
  font-size: 24px;
  color: cornflowerblue;
}
</style>
